<template>
    <div>
        <Nav/>
        
        <div class="container">
            <form action="">
                <input type="text" placeholder="大众polo">
                <button type="submit">搜</button>
            </form>
        </div>

        <div class="detail-header container">
            <div class="detail-header-left col-lg-6">
                <div class="slides">
                    <img src="https://img2.rrcimg.com/o_1ce67jt393280855955567294222533601.jpg" alt="">
                </div>
                <div class="thumb">
                    <ul>
                        <li class="col-lg-3">
                            <img src="https://img2.rrcimg.com/o_1ce67jt393280855955567294222533601.jpg" alt="">
                        </li>
                        <li class="col-lg-3">
                            <img src="https://img2.rrcimg.com/o_1ce67jt393280855955567294222533601.jpg" alt="">
                        </li>
                        <li class="col-lg-3">
                            <img src="https://img2.rrcimg.com/o_1ce67jt393280855955567294222533601.jpg" alt="">
                        </li>
                        <li class="col-lg-3">
                            <img src="https://img2.rrcimg.com/o_1ce67jt393280855955567294222533601.jpg" alt="">
                        </li>
                    </ul>
                </div>
            </div>
            <div class="detail-header-right col-lg-6">
                <div class="right-container">
                    <div class="title">捷豹-XJ 2014款 XJL 3.0 SC 两驱尊享商务版</div>
                    <div class="middle-content">
                        <div class="list">
                            <div class="maijiabaojia">卖家报价：</div>
                            <div class="jiage">￥48万</div>
                            <div class="xinchejia">新车含税价100</div>
                        </div>
                        <div class="list">
                            <div class="fuwufei">服务费：</div>
                            <div class="fuwufeijiage">19520元 <span>（车价×4%）</span></div>
                        </div>
                        <div class="list">
                            <div class="fuwuxiang">服务项：</div>
                            <div class="tag">14天可退</div>
                            <div class="tag">249项检测</div>
                        </div>
                    </div>
                    <div class="row-fluid-wrapper">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="datitle">2014年05月</div>
                                <div class="subshuoming">上牌时间</div>
                            </div>
                            <div class="col-lg-3">
                                <div class="datitle">6.82万公里</div>
                                <div class="subshuoming">公里数</div>
                            </div>
                            <div class="col-lg-3">
                                <div class="datitle">3L</div>
                                <div class="subshuoming">排量</div>
                            </div>
                            <div class="col-lg-3">
                                <div class="datitle">陕A</div>
                                <div class="subshuoming">上牌城市</div>
                            </div>
                        </div>
                        <div class="row submit">
                            <div class="col-lg-6">
                                <button class="btn btn-primary">预约看车</button>
                            </div>
                            <div class="col-lg-6">
                                <span class="tel">400 880 6666</span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="gallery container">
            <div class="gallerytitle">车辆详情</div>
            <div class="row cheliangxiangqing">
                <div class="col-lg-6">
                    <div class="maijianame">卖家-周先生说车</div>
                    <div class="desc">这车开了8.72万公里，2014年5月上的牌，车况非常好，开着很给力。这车的年头并不是很长，但它陪我走过许多风风雨雨，我开车小心且稳当，没出过事故。这车开起来一直很舒适顺手，从没出过任何恼人的小毛病。车况那是相当棒，因此我对它的好也不用多说，你来看看车就一目了然了。</div>
                </div>
                <div class="col-lg-6">
                    <div class="chelianginfo">车辆手续信息</div>
                    <div class="col-lg-6">
                        <table>
                            <tbody>
                                <tr>
                                    <td>年检到期时间</td>
                                    <td>2020-05</td>
                                </tr>
                                <tr>
                                    <td>商业险到期时间</td>
                                    <td>---</td>
                                </tr>
                                <tr>
                                    <td>有无购车发票</td>
                                    <td>无</td>
                                </tr>
                                <tr>
                                    <td>是否4S店保养</td>
                                    <td>无</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="col-lg-6">
                        <table>
                            <tbody>
                                <tr>
                                    <td>交强险到期时间</td>
                                    <td>2019-05</td>
                                </tr>
                                <tr>
                                    <td>过户次数</td>
                                    <td>1次</td>
                                </tr>
                                <tr>
                                    <td>车辆购置税完税证明</td>
                                    <td>无</td>
                                </tr>
                                <tr>
                                    <td>有无改装</td>
                                    <td>无</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="detail-car-img">
                <div class="title">车辆外观</div>
                <div class="subtitle">车况优秀，性能部件正常使用，经检测，外观及车身结构无重大撞击。</div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
                <div class="car-img">
                    <img src="https://img2.rrcimg.com/o_1ce67jtsk2874020861102075891040504.jpg?imageView/4/w/1400/h/960/format/webp|imageMogr2/strip/thumbnail/!41.041668p/crop/!590x394a0a0/format/webp" alt="">
                    <div class="desc">外观-右前:车身框架无变形，无重大撞击事故</div>
                </div>
            </div>

        </div>

        <Footer/>
    </div>   
</template>

<script>
import Nav from '../components/Nav.vue'
import Footer from '../components/Footer.vue'

export default {
    components:{
        Nav,
        Footer
    }
}
</script>

<style scope>
    body{
        background-color: white;
    }

    .detail-header{
        background-color: white;
    }

    form{
        margin-top: 10px;
        margin-bottom: 10px;
    }

    form input{
        width: 30%;
        outline: 0;
        height: 40px;
        text-indent: 15px;
    }

    form button{
        height: 40px;
        width: 40px;
    }

    ul{
        padding: 0;
    }
    
    .thumb li{
        padding: 3px;

    }

    .detail-header-right{
        padding-left: 40px;
    }

    .middle-content{
        background-color: #F5F5F5;
        margin-top: 20px;
    }

    .right-container .title{
        font-size: 1.2rem;
        margin-top: 10px;
    }

    .middle-content .list{
        margin-top: 30px;
        padding: 10px;
        font-size: 14px;
    }

    .middle-content .list > div{
        display: inline-block;
    }

    .jiage{
        font-size: 2rem;
        color:orangered;
    }

    .xinchejia{
        font-size: 12px;
        color:#888;
    }

    .fuwufeijiage span{
        color: #888;
    }

    .fuwufeijiage{
        color: orangered;
    }

    .right-container .tag{
        margin-left: 10px;

    }

    .subshuoming{
        font-size: 12px;
        color: #888;
        margin-top: 3px;
    }

    .row-fluid-wrapper{
        margin-top: 20px;
    }

    .datitle{
        font-weight: bold
    }

    .submit{
        margin-top: 30px;
        padding-left: 30px;
    }

    .tel{
        color: orangered;
        font-size: 1.5rem;
        float: right;
        font-weight: bold;
    }

    .gallery{
        background-color: #FAFAFA;
    }

    .gallerytitle{
        text-align: center;
        font-size: 2rem;
        margin-top: 20px;
        padding: 40px;
        border-bottom: 1px dashed #888;
        margin-left: 10px;
        margin-right: 10px;
    }

    .gallery .maijianame{
        text-align: center;
        margin-top: 30px;
        font-weight: bold;
    }
    .gallery .desc{
        font-size: .8rem;
        padding: 20px;
        line-height: 2;
    }

    .gallery .chelianginfo{
        text-align: center;
        margin-top: 30px;
        font-weight: bold;
    }

    table{
        margin-top: 10px;
        padding: 10px;
        font-size: 13px;
        font-weight: bold;
        line-height: 2;
    }

    td{
        margin-bottom: 10px;
    }

    .cheliangxiangqing{
        border-bottom: 1px dashed #888;
    }

    .detail-car-img{
        margin-top: 30px;
        overflow: hidden;
    }

    .detail-car-img .title{
        
        text-align: center;
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .detail-car-img .subtitle{
        text-align: center;
        margin-bottom: 30px;
    }

    .car-img{
        padding: 10px;
        width: 50%;
        float: left;
    }

    .car-img .desc{
        margin-top: -68px;
        background-color: black;
        position: relative;
        color: white;
        font-size: 14px;
        opacity: 0.6;
    }
</style>
